<template>
  <div class="wrapper">
    <div class="shopping-wrapper">
      <div class="shopping-box">
        <h3 class="count-title">全部商品：<span class="count">{{ list.length }}</span></h3>
        <table>
          <ShoppingHeader :setIsCheckedAll="setIsCheckedAll" :isCheckedAll="isCheckedAll" />
          <tbody>
            <GoodsCard v-for="goods in list" :key="goods.id" :goods="goods"
              :checkedGoods="checkedGoods"
            />
          </tbody>
        </table>
        <Settlement
          :isCheckedAll="isCheckedAll"
          :setIsCheckedAll="setIsCheckedAll"
          :removeAllGoods="removeAllGoods"
          :getCheckedGoodsNum="getCheckedGoodsNum"
          :getTotalPrice="getTotalPrice"
          :sendGoods="sendGoods"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapGetters, mapActions } from 'vuex'
import ShoppingHeader from '../../components/ShoppingHeader'
import GoodsCard from '../../components/GoodsCard'
import Settlement from '../../components/Settlement'

export default {
  name: 'ShoppingCart',
  components: {
    'ShoppingHeader': ShoppingHeader,
    'GoodsCard': GoodsCard,
    'Settlement': Settlement
  },
  methods: {
    ...mapMutations(['setIsCheckedAll', 'removeAllGoods', 'checkedGoods']),
    ...mapActions(['sendGoods'])
  },
  computed: {
    ...mapState({
      list: 'cartGoodsList',
      isCheckedAll: 'isCheckedAll'
    }),
    ...mapGetters(['getCheckedGoodsNum', 'getTotalPrice'])
  }
}
</script>

<style lang='scss'>
  .wrapper{
    margin-top: 80px;
  }
  .count-title{
    color: #f22;
  }
  .shopping-wrapper{
    width: 100%;
    display: flex;
    justify-content: center;
    .shopping-box{
      width: 85%;
      table{
        width: 100%;
        border-spacing: 0px;
        border-collapse: collapse;
        th{
          text-align: left;
          font-weight: 500;
          font-size: 15px;
        }
      }
    }
    @media screen and (max-width: 700px) {
      .shopping-box{
        width: 100%;
        font-size: 1vh;

        table th{
          font-size: 1em !important;
        }
        .goodsInfo-wrapper .icon{
          font-size: 4em !important;
        }
        .total-money .money{
          font-size: 2em !important;
        }
        .total-goods{
          font-size: 1.6em !important;
        }
        .all-delete{
          display: flex;
          align-items: center;
        }
        .settlement-wrapper .settlement .btn{
          font-size: 2em;
        }
        .counter-wrapper .total{
          font-size: 1em;
        }
        .goodsInfo-wrapper .goods-desc{
          padding-left: .2em;
        }
      }
    }
  }
</style>
